<template>
	<view>
		<swiper
			:indicator-dots="true"
			:autoplay="true"
			:interval="3000"
			:duration="1000"
		>
			<swiper-item v-for="(item, index) in dataList" :key="index">
				<view class="swiper-item">
					<image
						:src="item.src"
						mode="scaleToFill"
						class="swiper-img"
					></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	name: 'Swiper-Vue',
	data() {
		return {
			swipers: [
				{
					src:
						'https://tse1-mm.cn.bing.net/th/id/OIP-C.GZ0stXInaazv1DQofomWKQHaCU?w=316&h=109&c=7&r=0&o=5&dpr=1.56&pid=1.7'

					// 'https://alifei02.cfp.cn/creative/vcg/nowarter800/new/VCG41N1145395752.jpg?x-oss-process=image/format,webp'
				},
				{
					src:
						''
					// 'https://tenfei01.cfp.cn/creative/vcg/nowater800/new/VCG41N1309529230.jpg?x-oss-process=image/format,webp'
				},
				{
					src:
						''
					// 'https://alifei05.cfp.cn/creative/vcg/nowarter800/new/VCG211249146813.jpg?x-oss-process=image/format,webp'
				}
			]
		}
	},
	props:{ dataList:Array }
}
</script>

<style lang="scss" scoped>
swiper {
	width: 100%;
	height: 400rpx;
	.swiper-img {
		width: 100%;
		height: 400rpx;
	}
}
</style>
